<template>
  <div class="basicdataanalysis">
    <Row type='flex'
         justify="space-between"
         class="coinrevenue-list-edit">
      <Row type='flex'
           align='middle'>
        <Col>
        <span class="concrete-data">时间：</span>
        <datePickerYmd @on-change="search"
                       :selectDateType.sync='selectDateType'
                       :dataType='dataType'
                       :dateOption="dateOption"
                       v-model="timeDate"
                       style="display:inline-block"></datePickerYmd>
        </Col>
        <Row type='flex'
             align='middle'
             class="export-btn">
          <Col><span>门店名称：</span></Col>
          <Col>
          <vueTreeselectChoice :max-tag-count='1'
                               componentsType='iselect'
                               :filterable="true"
                               @on-change="handleShop"
                               @on-api-finish="apiFinish"
                               permissionCode="moms:report:basicanalytics"
                               v-model="searchObj.shopIds"></vueTreeselectChoice>
          </Col>
          <Col class="export-btn"><span>机台名：</span></Col>
          <Col>
          <Input v-model="searchObj.machineName"
                 placeholder="请输入"
                 class="common-input" />
          </Col>
          <Col>
          <Button type="primary"
                  class="coinrevenue-btn export-btn"
                  style="width:80px;"
                  @click="search">查询</Button>
          </Col>
        </Row>
      </Row>
    </Row>
    <el-table :data="tableData"
              border
              :default-expand-all="isexpandd"
              :load="load"
              v-if="istable"
              v-loading="loading"
              stripe
              lazy
              row-key="id"
              :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
              style="width: 100%">
      <el-table-column prop="machineName"
                       label="机台名称"
                       min-width="200">
      </el-table-column>
      <el-table-column label="币">
        <el-table-column prop="coinNum"
                         label="实体币"
                         min-width="100">
        </el-table-column>
        <el-table-column label="电子币"
                         prop="ecoinNum"
                         min-width="100">
        </el-table-column>
        <el-table-column label="电子币占比"
                         min-width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px"
                  v-if="scope.row.parentId ===null">{{(scope.row.ecoinRate*100).toFixed(2)}}%</span>
            <span style="margin-left: 10px"
                  v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="returnCoinNum"
                         label="退实体币"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="returnEcoinNum"
                         label="退电子币"
                         min-width="100">
        </el-table-column> -->
      </el-table-column>
      <el-table-column label="票">
        <el-table-column prop="returnLotteryNum"
                         label="出实体票"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="returnElotteryNum"
                         label="出电子票"
                         min-width="100">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="giftNum"
                       label="礼品"
                       width="100">
      </el-table-column>
    </el-table>
    <el-table :data="tableData2"
              border
              v-if="isSearch"
              :default-expand-all="isexpand"
              v-loading="loading2"
              stripe
              row-key="id"
              :tree-props="{children: 'children'}"
              style="width: 100%">
      <el-table-column prop="machineName"
                       label="机台名称"
                       min-width="200">
      </el-table-column>
      <el-table-column label="币">
        <el-table-column prop="coinNum"
                         label="实体币"
                         min-width="100">
        </el-table-column>
        <el-table-column label="电子币"
                         prop="ecoinNum"
                         min-width="100">
        </el-table-column>
        <el-table-column label="电子币占比"
                         min-width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px"
                  v-if="scope.row.parentId ===null">{{(scope.row.ecoinRate*100).toFixed(2)}}%</span>
            <span style="margin-left: 10px"
                  v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="returnCoinNum"
                         label="退实体币"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="returnEcoinNum"
                         label="退电子币"
                         min-width="100">
        </el-table-column> -->
      </el-table-column>
      <el-table-column label="票">
        <el-table-column prop="returnLotteryNum"
                         label="出实体票"
                         min-width="100">
        </el-table-column>
        <el-table-column prop="returnElotteryNum"
                         label="出电子票"
                         min-width="100">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="giftNum"
                       label="礼品"
                       width="100">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import '../../report.less'
import { shopBasicMachine } from '@/api/report/shop'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { Table, TableColumn } from 'element-ui'
import dayjs from 'dayjs'
export default {
  name: 'report_shop_basicdataanalysis',
  components: { datePickerYmd, vueTreeselectChoice, ElTable: Table, ElTableColumn: TableColumn },
  data () {
    return {
      title: '基础数据分析',
      loading: false,
      loading2: false,
      isSearch: false,
      isexpand: true,
      isexpandd: false,
      istable: true,
      ids: [],
      selectDateType: 'date',
      dataType: [{ key: 'date', value: '日' }, { key: 'month', value: '月' }, { key: 'daterange', value: '自定义' }],
      timeDate: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 00:00:00')],
      searchObj: {
        shopIds: '',
        machineName: ''
      },
      tableData: [
      ],
      tableData2: [],
      resData: [],
      dateOption: {
        disabledDate: date => {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      }
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') {
        return dayjs(this.timeDate[1])
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
      }
      return this.timeDate[1]
    }
  },
  async created () {
    if (this.$store.state.user.orgType === 1) {
      this.searchObj.shopIds = this.$store.state.user.orgId
      this.loading = true
      shopBasicMachine({
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj.shopIds],
        startDate: this.startDate,
        endDate: dayjs(this.endDate).add(1, 'day').format('YYYY-MM-DD 00:00:00'),
        machineName: this.searchObj.machineName
      }).then(res => {
        if (res.data.status === 200) {
          this.loading = false
          this.resData = res.data.data
          this.filtersData(this.resData)
          this.tableData = this.resData
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  },
  methods: {
    search () {
      if (!dayjs(this.startDate).isValid()) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopIds) {
        this.$Message.error(`请选择门店列表`)
      } else {
        this.istable = false
        this.getList()
      }
    },
    apiFinish (isId) {

    },
    async handleShop () {
      // this.searchObj.offset = 0
      // this.searchObj.pageIndex = 1
      this.search()
    },
    selectshop () {

    },
    expandAll () {
    },
    load (tree, treeNode, resolve) {
      resolve(
        tree.children
      )
    },
    filtersData (data) {
      data.map(ele => {
        if (ele.hasOwnProperty('children')) {
          this.$set(ele, 'hasChildren', true)
          if (ele.children.length) {
            this.filtersData(ele.children)
          } else {
            this.$set(ele, 'hasChildren', false)
          }
        }
      })
    },
    getList () {
      this.loading = true
      this.loading2 = true
      this.isSearch = false
      this.istable = false
      this.tableData = []
      this.tableData2 = []
      this.resData = []
      shopBasicMachine({
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj.shopIds],
        startDate: this.startDate,
        endDate: this.endDate,
        machineName: this.searchObj.machineName
      }).then(res => {
        if (res.data.status === 200) {
          if (this.searchObj.machineName.length) {
            this.istable = false
            this.isSearch = true
            this.loading2 = false
            this.tableData2 = res.data.data
          } else {
            this.isSearch = false
            this.istable = true
            this.loading = false
            this.resData = res.data.data
            this.filtersData(this.resData)
            this.tableData = this.resData
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table th > .cell {
  text-align: center;
  background-color: #f8f8f9;
  color: #515a6e;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #e8eaec;
}
.el-table--border,
.el-table--group {
  border: 1px solid #e8eaec;
  border-right: none;
  border-bottom: none;
}
.el-table .cell {
  text-align: center;
}
.el-table tr td:nth-of-type(1) .cell {
  text-align: left;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>
